<template>
	<view :style="{
			backgroundColor: pageData.bgColor,
			'--color': color,
			'--tit-size': pageData.titSize ? pageData.titSize + 'rpx' : '32rpx',
			'--info-size': pageData.infoSize ? pageData.infoSize + 'rpx' : '28rpx',
			'--data-size': pageData.dataSize ? pageData.dataSize + 'rpx' : '24rpx'
		}">
		<view class="p-left8 p-right8" v-if="list.length > 1">
			<u-tabs :list="list" :activeStyle="{ color }" lineWidth="20" :lineColor="color" keyName="website_list_title"
				@click="click" :inactiveStyle="{ color: pageData.inactiveColor }"></u-tabs>
		</view>
		<view class="p-left30 p-right30" v-if="list.length && !pageData.style">
			<block v-for="(item, index) in articles" :key="index">
				<!-- 没有图片 -->
				<view class="row f-column p-top30 p-bot30 bot"
					v-if="!item.website_article_img && !item.website_article_atlas"
					@click="$pop.artDetails(item)">
					<text class="tit black bold300 ellipsis_2">{{ item.website_article_title }}</text>
					<view class="count d-flex a-center m-top40 color_77 bold400">
						<text class="m-right12">{{ item.website_article_views }}阅读</text>
						<text class="m-right12">{{ item.allZan }}点赞</text>
						<text class="m-right12">{{ item.allComment }}评论</text>
					</view>
				</view>
				<!-- 右边小图 -->
				<view class="p-top30 p-bot30 bot" v-if="item.website_article_img && !item.website_article_atlas"
					@click="$pop.artDetails(item)">
					<view class="d-flex j-sb">
						<view style="width: 430rpx">
							<view class="tit black bold300 ellipsis_2 m-bot20">{{ item.website_article_title }}</view>
							<view class="info color_77 bold300 ellipsis">{{ item.website_article_info }}</view>
						</view>
						<image :src="$imgUrls(item.website_article_img)" mode="aspectFill" class="list_one_img"></image>
					</view>
					<view class="count d-flex a-center color_77 bold400 m-top40">
						<text class="m-right12">{{ item.website_article_views }}阅读</text>
						<text class="m-right12">{{ item.allZan }}点赞</text>
						<text class="m-right12">{{ item.allComment }}评论</text>
					</view>
				</view>
				<!--  一张大图 -->
				<view class="row p-top30 p-bot30 bot" v-if="item.website_article_atlas.length == 1"
					@click="$pop.artDetails(item)">
					<text class="tit black bold300 ellipsis_2">{{ item.website_article_title }}</text>
					<image :src="$imgUrls(item.website_article_atlas[0])" mode="aspectFill"
						class="list_MAX_img m-top30 m-bot40"></image>
					<view class="count row a-center color_77 bold400">
						<text class="m-right12">{{ item.website_article_views }}阅读</text>
						<text class="m-right12">{{ item.allZan }}点赞</text>
						<text class="m-right12">{{ item.allComment }}评论</text>
					</view>
				</view>

				<!-- 多图 -->
				<view class="row f-column p-top30 p-bot30 bot" v-if="item.website_article_atlas.length > 1"
					@click="$pop.artDetails(item)">
					<text class="tit black bold300 ellipsis_2">{{ item.website_article_title }}</text>
					<scroll-view scroll-x="true" class="scroll-row imgsView m-top20 m-bot40">
						<image :src="$imgUrls(subItem)" mode="aspectFill" class="list_more_img"
							v-for="(subItem, subIndex) in item.website_article_atlas" :key="subIndex"></image>
					</scroll-view>
					<view class="count row a-center color_77 bold400">
						<text class="m-right12">{{ item.website_article_views }}阅读</text>
						<text class="m-right12">{{ item.allZan }}点赞</text>
						<text class="m-right12">{{ item.allComment }}评论</text>
					</view>
				</view>
			</block>
			<view class="padding30 size26 color_66 text-center" @click="getBlockInfo(false)"
				v-if="!pageData.count && more">查看更多</view>
		</view>

		<!-- 横向滑动 -->
		<view v-if="list.length && pageData.style == 1" class="slide d-flex"
			:style="{ '--radius': `${pageData.radius * 2}rpx` }">
			<view v-for="(item, index) in articles" :key="index" class="item bgwhite f-shrink-0 p-re"
				:class="{ shadow2: pageData.shadow == 1 }"
				:style="{ marginRight: `${pageData.gap * 2}rpx`, width: pageData.direction == 3 && pageData.width ? `${pageData.width * 2}rpx` : '360rpx' }"
				@click="$pop.artDetails(item)">
				<text class="iconfont size28 p-ab" :class="item.article_collect ? 'icon-guanzhu3' : 'icon-guanzhu1'"
					@click.stop="handleCollect(item)"></text>
				<view class="img" :style="{ height }">
					<image :src="$imgUrls(item.website_article_img)" mode="aspectFill" class="wh"
						v-if="item.website_article_img"></image>
					<image :src="$imgUrls(item.website_article_atlas[0])" mode="aspectFill" class="wh"
						v-else-if="item.website_article_atlas"></image>
				</view>
				<view class="padding20">
					<view class="tit black bold300 ellipsis m-bot20">{{ item.website_article_title }}</view>
					<view class="info color_77 bold300 ellipsis">{{ item.website_article_info }}</view>
				</view>
			</view>
			<view class="padding30 flexac" @click="getBlockInfo(false)" v-if="!pageData.count && more">
				<u-icon name="arrow-right-double" size="28"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	export default {
		name: 'ArticleList',
		props: ['pageData'],

		data() {
			return {
				list: [],
				current: 0,
				height: '',
				page: 1, // 当前分类的文章页码
				more: false,
				articles: []
			}
		},
		mounted() {
			if (this.pageData.direction == 0) {
				this.height = '240rpx'
			} else if (this.pageData.direction == 1) {
				this.height = '480rpx'
			} else if (this.pageData.direction == 2) {
				this.height = '360rpx'
			} else {
				this.height = this.pageData.height ? this.pageData.height * 2 + 'rpx' : '360rpx'
			}

			this.getBlockInfo()
		},
		methods: {
			...mapMutations(['setHome']),
			async getBlockInfo(bool = true) {
				if (bool) this.page = 1
				let articleLimit = this.pageData.count
				let sortType = this.pageData.sortType || 0
				if (articleLimit) {
					let result = await this.$getBlockInfo(this.pageData.list, { sortType, articleLimit })
					this.list = result.list || []
					if (this.list.length) this.articles = this.list[this.current].list || []
					return
				}
				// 0 => 全部 => 分页(每次10条)
				let result = await this.$getBlockInfo(this.pageData.list, { sortType, articlePage: this.page,
					articleLimit: 10 })
				if (this.page == 1) this.list = result.list || []
				if (!this.list.length) return
				let arr = result.list[this.current].list || []
				this.articles = this.page == 1 ? arr : this.articles.concat(arr)
				if (arr.length < 10) return (this.more = false)
				this.more = true
				this.page++
			},
			click(e) {
				this.current = e.index
				this.page = 1
				this.articles = this.list[this.current].list || []
				if (this.articles.length < 10) return (this.more = false)
				this.more = true
				this.page++
			},
			handleCollect(item) {
				if (!this.vid) return this.setHome({ showMode: true })
				this.$http
					.post({
						url: '/singleSaleApi/article_collect',
						data: {
							website_article_id: item.website_article_id
						}
					})
					.then((res) => {
						if (res.code != 200) return this.$Toast(res.msg)
						item.article_collect = item.article_collect == 1 ? 0 : 1
					})
			}
		},
		computed: {
			...mapState(['color', 'vid'])
		}
	}
</script>

<style lang="scss">
	.list_one_img {
		width: 200rpx;
		height: 120rpx;
		overflow: hidden;
	}

	.list_MAX_img {
		width: 100%;
		height: 340rpx;
		overflow: hidden;
	}

	.imgsView {
		height: 180rpx;
	}

	.list_more_img {
		width: 210rpx;
		height: 180rpx;
		margin-right: 30rpx;
	}

	.list_more_img:last-child {
		margin-right: 0 !important;
	}

	.slide {
		overflow-x: scroll;
		padding: 30rpx 0 10rpx 30rpx;

		// padding: 8rpx 0;
		// margin: -8rpx 0; // 解决盒子阴影被截断问题
		.item {
			border-radius: var(--radius);

			.icon-guanzhu1,
			.icon-guanzhu3 {
				top: 20rpx;
				left: 20rpx;
				color: var(--color);
				z-index: 10;
			}

			.img {
				width: 100%;
				height: 240rpx;

				image {
					border-top-left-radius: var(--radius);
					border-top-right-radius: var(--radius);
				}
			}
		}
	}

	.shadow2 {
		box-shadow: 8rpx 8rpx 12rpx rgba(0, 0, 0, 0.06);
	}

	.tit {
		font-size: var(--tit-size);
	}

	.info {
		font-size: var(--info-size);
	}

	.count>text {
		font-size: var(--data-size);
	}
</style>